<template>
<div class="pagee">
  <div class="replan">
      <div class="datetime">{{year}}/{{month}}/{{day}}</div>
      <div class="title_">近日规划</div>
      <div class="input_">
        <div class="icon_"><div class="icon1">  </div></div>
        <div class="font_">今日已学</div>
        <div class="count_">{{dayStudy}}</div>
      </div>
      <div class="input_">
        <div class="icon_"><div class="icon2">  </div></div>
        <div class="font_">待学习</div>
        <div class="count_">{{dayNoStudy}}</div>	
      </div>
      <div class="waiting">
        <div class="icon_"><div class="icon3">  </div></div>
        <div class="font_">待办事项</div>
      </div>
      <div class="quadrant_1">
        <div class="qut1">
          <div class="qut1_up">
            重要但不紧急
          </div>
          <div class="input_text">
            <textarea class="tex" row="15" cols="15" v-model="Import.importM" @blur="
            Blur()"></textarea>
          </div>
        </div>
        <div class="qut2">
          <div class="qut2_up">
            重要且紧急
          </div>
          <div class="input_text">
            <textarea class="tex" row="10" cols="10" v-model="Import.importH" @blur="
            Blur()"></textarea>
          </div>
        </div>

      </div>
      <div class="quadrant_2">
        <div class="qut3">
          <div class="qut3_up">
            不重要不紧急
          </div>
          <div class="input_text">
            <textarea class="tex" row="10" cols="10" v-model="Import.noimport" @blur="
            Blur()"></textarea>
          </div>
        </div>
        <div class="qut4">
          <div class="qut4_up">
            紧急但不重要
          </div>
          <div class="input_text">
            <textarea class="tex" row="10" cols="10" v-model="Import.importL" @blur="
            Blur()"></textarea>
          </div>
        </div>
      </div>
		
	</div>

</div>
</template>

<script>
  import api from '../../utils/jiekou.js'
  const {getCount} = api
  const {updateImprot} = api
  const {getImprot} = api
	export default{
		data(){
			return {
				year:'0',
				month:'0',
				day:'0',
        Import:{
          importM:'',
          importH:'',
          importL:'',
          noimport:'',
        },
        dayStudy:0,
        dayNoStudy:0,
        flag:1,
			}
		},
		onLoad() {
			this.time();
		},
    onShow() {
      this.getCountSum();
      this.show();
    },
    onHide() {
      this.onBlur();
      this.flag=1;
    },
		methods:{
			time(){
			 let ye = new Date().getFullYear();
			 let mo = new Date().getMonth()+1;
			 let da = new Date().getDay();
			 this.year=ye;
			 this.month = mo;
			 this.day = da;
			},
      getCountSum(){
        getCount().then((res)=>{
          if(res.rows.length==0){
            this.dayNoStudy=20;
          }
          else{
            this.dayNoStudy=res.rows.length;
          }
          this.dayStudy=20-this.dayNoStudy
        });
      },
      onBlur(){
        if(this.flag==0){
            updateImprot(this.Import);
        }
      },
      Blur(){
        this.flag=0;
      },
      show(){
        console.log(1);
        getImprot().then((res)=>{
          this.Import= res.rows[0]
        });
      }
  },
}
</script>

<style>
  .pagee{
    height: 100vh;
  }
	.replan{
		height: 100%;
    width: 100%;
		background: url("../../replan_back.png") repeat fixed center;
		background-size: 100% 100%;

	}
	.datetime{
		width: 25%;
		height: 4%;
		font-size: 1.5em;
		margin-left: 5%;
		padding-top:10%;
		padding-left: 2%;
		color: white;
	}
	.title_{
		width: 180px;
		height: 6%;
		font-size:2.5em;
		font-family: 'Courier New', Courier, monospace;
		font-weight: bold;
		margin: auto;
		color: white;
		
	}
	.input_{
		width: 85%;
		height: 6.5%;
		background-color: #BED9FF;
		margin: auto;
		margin-top: 15px;
		display: flex;
		border-radius: 10px;
	}
	.icon{
		margin-left: 5%;
		margin-top: 14%;
	}
	.icon1 , .icon2 ,.icon3{
		width: 45px;
		height: 80%;
		background-size: 100% 100%;
		margin-top: 15%;
	}
	.icon1{
		background-image: url("../../static/wancheng.png");
	}
	.icon2{
		background-image: url("../../static/weiwancheng.png");
	}
	.icon3{
		background-image: url("../../static/daiban.png");
	}	
	.font_{
		width: 30%;
		font-weight: bold;
		color: white;
		font-size: 1.1em;
		display: flex;
		align-items: center;
		justify-content: center;	
	}
	.count_{
		width: 50%;
		height: 10%;
		font-weight: bold;
		color: white;
		font-size: 1.2em;
		margin-top: 4%;
		text-align: right;
			
	}
	.waiting{
		width: 85%;
		height: 6%;
		margin: auto;
		/* margin-top: 15px; */
		display: flex;
	}
	.quadrant_1 ,.quadrant_2{
		width: 85%;
		height: 29%;
		margin: auto;
		margin-top: 10px;
		display: flex;
		border-radius: 10px;
		font-size: 0.9em;
		font-weight: bolder;
		}
	.qut1{
		width: 49%;
		background-color: yellowgreen;
		border-radius: 10px;
		margin-right: 7px;	
		text-align: right;
		background: rgba(255, 255, 255, 0.8);
	}
	.qut1_up{
		width: 90%;
		height: 8%;
		margin: auto;
		border-bottom: 3px solid orange;
	}
	.qut2{
		width: 49%;
		background-color: yellowgreen;
		border-radius: 10px;	
		text-align: right;
		background: rgba(255, 255, 255, 0.8);
	}
	.qut2_up{
		width: 90%;
		height: 8%;
		margin: auto;
		border-bottom: 3px solid red;
	}
	.qut3{
		width: 49%;
		background-color: yellowgreen;
		border-radius: 10px;
		margin-right: 7px;
		text-align: right;
		background: rgba(255, 255, 255, 0.8);
		
	}
	.qut3_up{
		width: 90%;
		height: 8%;
		margin: auto;
		border-bottom: 3px solid green;
	}
	.qut4{
		width: 49%;
		background-color: yellowgreen;
		border-radius: 10px;
		text-align: right;
		background: rgba(255, 255, 255, 0.8);
	}
	.qut4_up{
		width: 90%;
		height: 8%;
		margin: auto;
		border-bottom: 3px solid blue;
	}
	.input_text{
		width: 100%;
		height: 90%;
	}
	.tex{
		width: 90%;
		height: 90%;
		margin: auto;
		text-align: left;
	}
/* .content__bgi__hight{
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 280px;
} */
</style>